﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict //EN">
<html>
<head>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<title>שאלון</title>
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
	<style type="text/css">
		body {margin:0;padding:0;direction:rtl; font: 12px arial; }
		#demo {width: 700px; margin:0 auto; }
		#title {text-align: center; font-size: 30px; font-weight:bold; text-decoration: underline; }
		
		/* Ladder Display */
		#ladder { width: 180px; margin:0 auto; padding: 0px 8px; background-color:orange;}
		.ladder_edges {background-color:white; height:24px; left:0px;}
		#ladder_top {border-bottom: 1px solid #999;}
		#ladder_bot {border-top: 1px solid #999;}
		.ladder_border {border-left: 1px solid #999; border-right: 1px solid #999;}
		#innerLadder {padding: 4px 0px;}
		.ui-sortable-placeholder {height:18px; background-color:#eeefff; border: 1px dashed #777 !important;}
		
		/*Ladder content*/
		#entry_0 {list-style-type: none; margin:0;padding:0;}
		#entry_0 li {border: 1px solid #777; background-color:#eeefff; font: bold 15px arial ; cursor:move; margin: 5px 0; padding: 2px 8px;  }
		#entry_0 li:hover {background-color:#dddfff;}
		#entry_result {margin:0 auto; width:100%;}
	</style>
</head>
<body>
	<div id="demo">
		<div id="title">שאלון</div>
		<div id="ladder" class="ladder_border">
			<div id="ladder_top" class="ladder_border ladder_edges">&nbsp;</div>
			<div id="innerLadder">
				<ul name="entry.0.single" id="entry_0">
					<li id="מטרה">מטרה</li>
					<li id="קבוצה">קבוצה</li>
					<li id="חבר">חבר</li>
					<li id="בורא">בורא</li>
					<li id="תיקון">תיקון</li>
					<li id="נשמה">נשמה</li>
					<li id="חיים">חיים</li>
					<li id="נצחיות">נצחיות</li>
					<li id="ידע">ידע</li>
					<li id="הפצה">הפצה</li>
					<li id="לימוד">לימוד</li>
					<li id="אהבת הזולת">אהבת הזולת</li>
					<li id="עזרה לחבר">עזרה לחבר</li>
					<li id="מעשר">מעשר</li>
					<li id="התחייבויות בקבוצה (תורנויות)">התחייבויות בקבוצה (תורנויות)</li>
					<li id="שיעורים">שיעורים</li>
					<li id="דוגמה לחברים">דוגמה לחברים</li>
				</ul>
			</div>
			<div id="ladder_bot" class="ladder_border ladder_edges">&nbsp;</div>
		</div>
		<br />
		<div>
			<input id="entry_result" type="text" value="" />
		</div>
	</div>
	<script type="text/javascript">
		var isDrag = false;
			
		$(function() {

			$("#entry_0 li").bind("click", function() { MoveListItemUp(this);});

			$("#entry_0").sortable({
				revert: "250",
				update: function(event, ui) { OutputListToForm(); },
				placeholder: "ui-sortable-placeholder",
				start: function() { isDrag = true;},
				stop: function() { }
		}	);
			$("#entry_0").disableSelection();
			OutputListToForm();	
		});

		function GetListAsString() {
			var result = "";
				$("#entry_0").children("li").each(function(idx, elm) {
					result += elm.id + ", ";
				});
				result = result.substring(0,result.length - 2);
			try {
			}
			catch(ex) {
			}
			return result;
		}

		function OutputListToForm() {
			var listAsString = GetListAsString();
			$("#entry_result").val(listAsString);
		}

		function MoveListItemUp(elm) {
			if (!isDrag) {
				prevElm = $(elm).prev();
				
				$(elm).insertBefore(prevElm);
				$(elm).hide().fadeIn("fast");
				//$(prevElm).hide().fadeIn("fast");
				
				OutputListToForm();
			}
			else {
				isDrag = false;
			}
		}
	</script>
</body>
</html>
